<template>
  <div id="gift">
    <div class="nav">
      <p>礼品管理</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>积分管理</el-breadcrumb-item>
        <el-breadcrumb-item>礼品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="head">
      <el-input v-model="input" placeholder="礼品名称"></el-input>

      <el-button
        type="primary"
        @click="search"
        class="search"
        icon="el-icon-search"
        >搜索</el-button
      >
      <el-button
        type="primary"
        class="reset"
        @click="reset"
        icon="el-icon-refresh"
        >重置</el-button
      >
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="nav-list">
        <p class="list">查询结果列表</p>
        <el-button type="primary" @click="addDialog = true" class="add"
          >新增</el-button
        >
      </div>

      <el-table :data="tableData" stripe style="width: 100%" align="center">
        <el-table-column prop="id" label="序号" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="giftName"
          label="礼品名称"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="giftPic" label="礼品图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.giftPic" style="width: 40px; height: 40px" />
          </template>
        </el-table-column>
        <el-table-column prop="redeem" label="兑换积分" align="center">
        </el-table-column>
        <el-table-column prop="giftInventory" label="库存" align="center">
        </el-table-column>
        <el-table-column prop="giftStatus" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.giftStatus == 0 ? "上架中" : "已下架" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <span
              style="color: #0bb197; margin-right: 15px"
              @click="editOpen(scope.row.id)"
              >编辑</span
            >
            <span
              style="color: #0bb197; margin-right: 15px"
              @click="del(scope.row.id)"
              >删除</span
            >
            <span style="color: #0bb197" @click="statusDialogOpen(scope.row)">
              {{ scope.row.giftStatus == 0 ? "下架" : "上架" }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
      >
      </el-pagination>
    </div>
    <!-- 新增 -->
    <el-dialog title="新增礼品" :visible.sync="addDialog">
      <el-form :model="addData">
        <div>
          <el-form-item label="礼品名称" :label-width="formLabelWidth">
            <el-input v-model="addData.giftName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="库存" :label-width="formLabelWidth">
            <el-input
              v-model="addData.giftInventory"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="兑换积分" :label-width="formLabelWidth">
            <el-input v-model="addData.redeem" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="礼品图片" :label-width="formLabelWidth">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleelchange"
              :auto-upload="false"
              list-type="picture-card"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button class="footer" type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑礼品" :visible.sync="editDialog">
      <el-form :model="editData">
        <div>
          <el-form-item label="礼品名称" :label-width="formLabelWidth">
            <el-input v-model="editData.giftName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="库存" :label-width="formLabelWidth">
            <el-input
              v-model="editData.giftInventory"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="兑换积分" :label-width="formLabelWidth">
            <el-input v-model="editData.redeem" autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button class="footer" type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 状态-->
    <el-dialog
      :visible.sync="statusDialog"
      width="30%"
      :before-close="handleClose"
    >
      <span class="title">是否下架/上架该礼品</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="statusDialog = false" class="cancel"
          >取 消</el-button
        >
        <el-button type="primary" @click="editStatus" class="editStatus"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: [],
      fileList: [],
      currentPage: 1,
      input: "",
      count: 5,
      pagenum: 1,
      total: 0,
      addDialog: false,
      editDialog: false,
      statusDialog: false,
      addData: {
        giftInventory: 0,
        giftName: "",
        giftPic: "",
        giftStatus: 0,
        id: 0,
        redeem: 0,
      },
      editData: {
        giftInventory: 0,
        giftName: "",
        redeem: "",
      },
      tableData: [],
      formLabelWidth: "120px",
      //状态id
      editStatusInfor: {
        giftStatus: 0,
        id: 0,
      },
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getData();
    },
    getData: function () {
      this.$axios({
        url: "/smart/gift/gifts",
        method: "post",
        params: {
          pagenum: this.pagenum,
          count: this.count,
        },
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.console.error("加载失败！");
        }
      });
    },
    add: function () {
      this.$axios({
        url: "/smart/gift/add",
        method: "post",
        params: this.addData,
        headers: {
          "content-type": "multipart/form-data",
        },
        data: this.formData,
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.addDialog = false;
          this.$message.success("添加成功");
          this.getData();
          this.addData = {};
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    editOpen(row) {
      this.editDialog = true;
      this.$axios({
        url: "/smart/gift/gift/" + row,
        method: "post",
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.editData = data.data;
        }
      });
    },
    edit: function () {
      this.$axios({
        url: "/smart/gift/edit",
        method: "put",
        data: this.editData,
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.editDialog = false;
          this.getData();
          this.$message.success("修改成功！");
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    del(row) {
      this.$axios({
        url: "/smart/gift/del/" + row,
        method: "delete",
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("删除成功");
          this.getData();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    //  礼品状态
    statusDialogOpen: function (row) {
      this.statusDialog = true;
      this.editStatusInfor.id = row.id;
      this.editStatusInfor.giftStatus = row.giftStatus;
    },
    editStatus() {
      this.$axios({
        url: "/smart/gift/shelve",
        method: "put",
        params: {
          id: this.editStatusInfor.id,
          status:
            this.editStatusInfor.giftStatus == 0
              ? (this.editStatusInfor.giftStatus = 1)
              : (this.editStatusInfor.giftStatus = 0),
        },
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.statusDialog = false;
          this.$message.success(data.msg);
          this.getData();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    search: function () {
      this.$axios({
        url: "/smart/gift/gift",
        method: "post",
        params: {
          count: this.count,
          name: this.input,
          pagenum: this.pagenum,
        },
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.tableData = data.data.list;
          this.total = data.total;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
    reset: function () {
      this.input = "";
      this.getData();
    },

    handleelchange(upload, fileList) {
      // console.log("333", upload, fileList);
      this.formData = new FormData();
      fileList.map((item) => {
        //fileList本来就是数组，就不用转为真数组了
        this.formData.append("upload", item.raw); //将每一个文件图片都加进formdata
      });
      // this.$axios({
      //   url: "/smart/gift/add",
      //   method: "post",
      // }).then((res) => {
      //   console.log(res);
      // });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#gift {
  height: 100px;
  color: black;
  padding: 20px;
}
.nav {
  display: flex;
  justify-content: space-between;
}
.editStatus{
  background: #0bb197;
}

.head {
  background: white;
  height: 80px;
  width: 100%;
  margin: 20px 0px 20px 0;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.el-input,
.el-select {
  width: 180px;
  margin: 10px;
}
.el-button {
  padding: 11px;
  width: 80px;
  margin: 0 5px 0 10px;
}
.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 20px 0;
}
.search,
.add {
  background: #0bb197;
  border: 1px solid #0bb197;
  height: 40px;
}
.reset {
  background: white;
  color: #c0c4cc;
  border: 1px solid #dcdfe6;
}
.reset:hover {
  color: #0bb197;
}
.list {
  font-size: 14px;
  font-weight: 600;
  //   padding: 20px 0 10px 0;
}
.content {
  background: white;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 6px;
}
.el-pagination {
  height: 100px;
  margin-top: 30px;
  text-align: right;
}
.el-form {
  display: flex;
  justify-content: space-between;
}
.dialog-footer {
  text-align: center;
}
.footer {
  background: #0bb197;
  border: 1px solid #0bb197;
}
</style>
<style lang="less">
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #0bb197;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0bb197;
  color: #fff;
}
#gift {
  .el-dialog__header {
    background-color: #0bb197;
  }
  .el-dialog__title {
    color: white;
  }
}
</style>